import { Input, InputNumber, Select } from '@/components/AntdProxy';
import CommonDrawer from '@/components/CommonDrawer';
import { CrudFormLayout } from '@/components/Crud';
import { ChargeStationSelect } from '@/components/CustomForm';
import { CHARGE_TYPE_OPTIONS } from '@/constants/enums';
import { REQUIRED } from '@/constants/rules';
import request from '@/utils/request';
import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
import { Button, Form, message } from 'antd';

const BatchAdd = (props) => {
  const { open, record, onCancel, onOk } = props;
  const [form] = Form.useForm();

  const handleOk = async () => {
    const params = await form.validateFields();
    await request({
      url: '/datas/charge/device/addbatch',
      method: 'POST',
      data: params,
    });
    message.success('操作成功');
    onOk?.();
  };

  return (
    <CommonDrawer
      title="批量添加"
      open={open}
      onClose={onCancel}
      onOk={handleOk}
      afterOpenChange={(visible) => {
        if (!visible) {
          form.resetFields();
        }
      }}
      width={600}
      destroyOnHidden
    >
      <Form form={form} layout="vertical">
        <CrudFormLayout itemMinWidth={250}>
          <Form.Item label="充电站" name="chargeStationId" rules={[REQUIRED]}>
            <ChargeStationSelect />
          </Form.Item>
          <Form.Item
            label="充电类型"
            name="chargeType"
            initialValue={0}
            rules={[REQUIRED]}
          >
            <Select options={CHARGE_TYPE_OPTIONS} />
          </Form.Item>
          <Form.Item label="功率" name="powers" initialValue={160}>
            <InputNumber addonAfter="kw" />
          </Form.Item>
          <Form.Item label="备注" name="remark">
            <Input />
          </Form.Item>
        </CrudFormLayout>
        <Form.Item
          label="充电设备"
          name="devices"
          rules={[{ required: true, message: '请添加充电设备' }]}
        >
          <Form.List
            name="devices"
            rules={[{ required: true, message: '请添加充电设备' }]}
          >
            {(fields, { add, remove }) => (
              <>
                {fields.map(({ key, name, ...restField }) => (
                  <div
                    key={key}
                    style={{ display: 'flex', gap: 8, marginBottom: 8 }}
                  >
                    <Form.Item
                      {...restField}
                      name={[name, 'chargeDeviceCode']}
                      rules={[{ required: true, message: '请输入设备编号' }]}
                      style={{ marginBottom: 0, flex: 1 }}
                    >
                      <Input placeholder="设备编号" />
                    </Form.Item>
                    <Form.Item
                      {...restField}
                      name={[name, 'chargeDeviceName']}
                      rules={[{ required: true, message: '请输入设备名称' }]}
                      style={{ marginBottom: 0, flex: 1 }}
                    >
                      <Input placeholder="设备名称" />
                    </Form.Item>
                    <MinusCircleOutlined onClick={() => remove(name)} />
                  </div>
                ))}
                <Form.Item>
                  <Button
                    type="dashed"
                    onClick={() => add()}
                    block
                    icon={<PlusOutlined />}
                  >
                    添加设备
                  </Button>
                </Form.Item>
              </>
            )}
          </Form.List>
        </Form.Item>
      </Form>
    </CommonDrawer>
  );
};

export default BatchAdd;
